<template>
    <div>
        <div v-show="showMine">
            <!-- 个人中心上半部 -->
            <ul class="top">
                <li class="vip">
                    <a href="javascript:;" @click="toMineInfo"><img src="../../../assets/image/photo.png" alt="头像"></a> 
                    <div>
                        <p>150****1234</p>
                        <span @click="vipRights"><i>0</i>新新会员<b> &gt;</b></span>
                    </div>
                    <a href="javascript:;" class="code"><img src="../../../assets/image/QRcode.png" alt="二维码"></a>
                </li>
                <li class="order">
                    <a href="javascript:;" v-for="(value,index) in order"
                        :key="index"
                        @click="ToOrder(index)">
                        <img :src="value.url">
                        <i>{{value.order}}</i>
                        <span class="badge" v-if="value.num!=0">{{value.num}}</span>
                    </a>
                </li>
            </ul>
            <!-- 主体 -->
            <div class="main">
                <ul class="gift">
                    <li v-for="(value,index) in vipPower" :key="index" @click="toVipPower(index)">
                        <img :src="value.url" alt="图片">
                        <p>{{value.title}}</p>
                        <span>{{value.num}}</span>
                    </li>
                </ul>
                <div class="my" >
                    <van-cell is-link 
                    :title="value" 
                    v-for="(value,index) in my"
                    :key="index"
                    @click="toMy(index)"/>
                </div>
                <div class="about">
                    <van-cell is-link :title="value" 
                    v-for="(value,index) in about"
                    :key="index"
                    @click="toAbout(index)"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import orderImg1 from '../../../assets/image/topay.png'
    import orderImg2 from '../../../assets/image/toshipments.png'
    import orderImg3 from '../../../assets/image/gofor.png'
    import orderImg4 from '../../../assets/image/finished.png'
    
    import vipImg1 from '../../../assets/image/gift.png'
    import vipImg2 from '../../../assets/image/cards.png'
    import vipImg3 from '../../../assets/image/grade.png'
    import vipImg4 from '../../../assets/image/loveABS.png'
    export default {
    data() {
        return {
            order:[ {   // 订单信息
                order:'待付款',
                url:orderImg1,
                num:2
                },{
                order:'待发货',
                url:orderImg2,
                num:1
                }, {
                order:'配送中',
                url:orderImg3,
                num:1
                }, {
                order:'已完成',
                url:orderImg4,
                num:1
                } ] ,
            vipPower:[
                {
                    title:'我的月礼',
                    url:vipImg1,
                    num:'0个月'
                },{
                    title:'我的卡券',
                    url:vipImg2,
                    num:0
                },{
                    title:'积分钱包',
                    url:vipImg3,
                    num:0
                },{
                    title:'管家记录',
                    url:vipImg4,
                    num:'0条'
                },
            ],
            isshow:[false,false,false,false],
            my:["我的消息","我的收藏","我的足迹","我的拼团"],
            about:["服务中心","关于我们","设置"],
            uid:''
        };
    },

    components: {},

    computed: {
        showMine(){  // 我的页面显示状态
            return this.$store.state.showMine
        }
    },

    mounted() {
       this.uid=localStorage.getItem('uid');
       console.log('uid:'+this.uid);
    },

    methods: {
        vipRights(){        // 进入会员权益
            this.$router.push('mine/vipRights/'+this.uid);
            this.$store.commit('changeShowMine',false);
        },
        toMineInfo(){       // 进入个人信息页
            this.$router.push('changemineinfo');
        },
        ToOrder(index){     // 进入我的订单页
            this.$router.push('mine/InMine/Order/'+index);
            this.$store.commit('changeShowMine',false);
        },
        toVipPower(index){  // 进入会员相关
            switch (index) {
                case 0:     // 进入我的月礼
                    this.$router.push('mine/InMine/myMonthGift');
                    this.$store.commit('changeShowMine',false);
                    break;
                case 1:     // 进入我的卡券
                    this.$router.push('mine/InMine/myCoupon');
                    this.$store.commit('changeShowMine',false);
                    break;
                case 2:     // 进入积分钱包
                    this.$router.push('mine/InMine/myGrade');
                    this.$store.commit('changeShowMine',false);
                    break;
                case 3:     // 进入管家记录
                    this.$router.push('mine/InMine/loveABS');
                    this.$store.commit('changeShowMine',false);
                    break;
            
                default:
                    break;
            }   
        },
        toMy(index){    // 我的相关
            switch (index) {
                case 0:     // 进入我的消息页面
                    this.$router.push('mine/InMine/myNews');
                    this.$store.commit('changeShowMine',false);
                    break;
                case 1:     // 进入我的收藏页面
                    console.log('我的收藏');
                    break;
                case 2:     // 进入我的足迹页面
                    console.log('我的足迹');
                    break;
                 case 3:     // 进入我的拼团页面
                    console.log('我的拼团');
                    break;
                default:
                    break;
            }
        },
        toAbout(index){ // 关于我们
            switch (index) {
                case 0:     // 进入服务中心页面
                    console.log('服务中心');
                    break;
                case 1:     // 进入关于我们页面
                    console.log('关于我们');
                    break;
                case 2:     // 进入设置页面
                    this.$router.push('setting');
                    break;
            
                default:
                    break;
            }
        }
    }
};
</script>
<style lang='stylus' scoped>
    // 个人中心上半部
    .top
        background #000
        color #fff
        height 140px
        padding 16px
        font-size 10px

        // 会员信息
        .vip
            display flex
            justify-content space-between
            align-items center
            a
                width 47px
                height 47px
                img 
                    width 100%
            .code
                width 32px
                height 32px
            div
                transform translate(-65px)
                height 47px
                line-height 24px
                p
                    font-size 15px
                i   
                    background #BB2741
                    display inline-block
                    font-size 14px
                    line-height 14px
                    border-radius 7px
                    padding 0 10px
                    margin-right 10px
                b
                    margin-left 10px
            .van-icon
                width 47px
                height 47px
                padding 2px
                border-radius 50%
                font-size 43px
                background #ccc
        // 订单信息
        .order
            width 100%
            margin-top 20px
            display flex
            justify-content space-around
            transform translateX(13px)
            a
                color #fff
                font-size 11px
                display flex
                flex-direction column
                align-items center
                justify-content center
                border-right 2px solid #fff
                padding-right 26px
                position relative
                &:last-of-type
                    border-right 0
            img 
                width 27px
                height 20px
                margin-bottom 8px
            .badge
                display inline-block
                width 20px
                height 20px
                border-radius 50%
                background #CA013D
                color #fff
                text-align center
                line-height 20px
                position absolute
                top -10px
                right 30%
            // .show
            //     display none 
    // 主体
    .main
        background #F9F9F9
        position absolute
        top 140px
        left 0
        right 0
        bottom 50px
        .gift
            background #fff
            font-size 11px
            color #5D5D5D
            display flex
            justify-content space-around
            align-items center
            text-align center
            height 90px
            // margin-bottom 9px
            margin-top 9px
            p
                line-height 24px
            img 
                width 25px
                height 25px
        .van-cell
            margin-top 1px
        .about
            margin-top 9px

</style>
